<template>
	<view class="content">
		<view class="">{{dataList['info']['node_id'] || '加载中...'}}</view>
		<view class="">{{dataList['info']['province'] || '加载中...'}}{{dataList['info']['city'] || '加载中...'}}-{{dataList['info']['node']}}</view>
		<view class="title">
			带宽/硬件测评
		</view>
		<view class="one">
			<view class="one-info">
				<view class="">地域</view>
				<view class="">{{dataList['info']['province'] || '加载中...'}}{{dataList['info']['city'] || '加载中...'}}</view>
			</view>
			<view class="one-info">
				<view class="">运营商</view>
				<view class="">{{dataList['info']['isp'] || '加载中...'}}</view>
			</view>
			<view class="one-info">
				<view class="">资源类型</view>
				<view class="">{{dataList['basic']['resourceType'] || '加载中...'}}</view>
			</view>
			<view class="one-info">
				<view class="">网络类型</view>
				<view class="">{{dataList['basic']['natType'] || '加载中...'}}</view>
			</view>
			<view class="one-info">
				<view class="">拨号方式</view>
				<view class="">{{dataList['basic']['dialType'] || '加载中...'}}</view>
			</view>
		</view>

		<view class="two">
			<view class="two-info">
				<view class="">上报带宽</view>
				<view class="two-info-d">{{dataList['basic']['usbw'] || 0}}Mbps*{{dataList['basic']['bwNum'] || 0}} = {{dataList['basic']['usbw'] * dataList['basic']['bwNum'] || 0}}Mbps</view>
			</view>
			
			<view class="two-info" v-if="dataList['pressure']">
				<view class="">压测带宽</view>
				<view class="two-info-d">{{dataList['basic']['usbw'] || 0}}Mbps*{{dataList['basic']['bwNum'] || 0}} = {{dataList['basic']['usbw'] * dataList['basic']['bwNum'] || 0}}Mbps</view>
			</view>
			<view class="two-info" v-if="dataList['pressure']">
				<view class="">极限带宽</view>
				<view class="two-info-d">{{dataList['basic']['usbw'] * dataList['basic']['bwNum'] || 0}}Mbps</view>
			</view>
			<view class="two-info" v-if="dataList['pressure']">
				<view class="">极限压测满意度</view>
				<view class="two-info-d">100%</view>
			</view>
			<view class="two-info" v-if="dataList['pressure']">
				<view class="">极限带宽RTT</view>
				<view class="two-info-d" >{{(rtt/(dataList['pressure'][0]["lines"].length-1)).toFixed(2)}}ms</view>
			</view>
			<view class="two-info" v-if="dataList['pressure']">
				<view class="">极限带宽TCP重传率</view>
				<view class="two-info-d">{{(tcpRate/(dataList['pressure'][0]["lines"].length-1)).toFixed(2)}}%</view>
			</view>
			<view class="two-info" v-if="dataList['pressure']">
				<view class="">丢包压测带宽平均</view>
				<view class="two-info-d">{{(limitBw).toFixed(2)}}Mbps</view>
			</view>
			<view class="two-info" v-if="dataList['pressure']">
				<view class="">丢包压测满意度</view>
				<view class="two-info-d">{{(limitBw/dataList['pressure'][0]['bandwidth']*100).toFixed(2)}}%</view>
			</view> 
			<view class="two-info" v-if="dataList['pressure']">
				<view class="">带宽压测时间</view>
				<view class="two-info-d">{{dataList['pressure'][0]['pressureTime'] | formatDate}}</view>
			</view>
			<view class="two-info">
				<view class="" style="border: 1rpx solid;padding: 10rpx;border-radius: 10rpx;" @tap="networkpressure" v-if="stage != 'inService'">宽带压测</view>
				<view class="" style="border: 1rpx solid #eaeaea;padding: 10rpx;border-radius: 10rpx; background-color: #eaeaea;" v-else>宽带压测</view>
			</view>

			<view class="two-info" v-if="dataList['pressure']">
				<view class="two-info-t">极限/丢包压测满意度低,重点关注一下线路。</view>
				<view class="two-info-s" @tap="seeAll">查看所有线路</view>
			</view>

			<view class="horizontal-scroll" v-if="dataList['pressure']">
				<view class="fixed-content">
					<view class="td" bindtap="showAll">线路</view>
					<view class="td" bindtap="showAll" v-for="(item,index) in dataList['pressure'][0]['lines']" :key="index">{{item.lineName}}</view>
				</view>
				<view class="scroll-content">
					<scroll-view class="scroll-view_w" scroll-x style="width:100%">
						<view class="item">
							<view class="td">极限带宽</view>
							<view class="td" bindtap="showAll" v-for="(item,index) in dataList['pressure'][0]['lines']" :key="index">{{item.actualBw}}Mbps</view>
						</view>
						<view class="item">
							<view class="td">丢包压测带宽</view>
							<view class="td" bindtap="showAll" v-for="(item,index) in dataList['pressure'][0]['lines']" :key="index">{{item.limitBw}}Mbps</view>
						</view>
						<view class="item">
							<view class="td">极限带宽时RTT</view>
							<view class="td" bindtap="showAll" v-for="(item,index) in dataList['pressure'][0]['lines']" :key="index">{{item.rtt}}ms</view>
						</view>
						<view class="item">
							<view class="td">极限带宽tcp重传率</view>
							<view class="td" bindtap="showAll" v-for="(item,index) in dataList['pressure'][0]['lines']" :key="index">{{item.tcpRetryMissRate}}%</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<view class="three">
			<view class="three-info">
				<view class="">CPU线程数</view>
				<view class="three-info-d">{{dataList['hardware']['CPUThreads'] || '--'}}</view>
			</view>
			<view class="three-info">
				<view class="">CPU主频</view>
				<view class="three-info-d">{{dataList['hardware']['CPUFreq'] || '加载中...'}}</view>
			</view>
			<view class="three-info">
				<view class="">内存大小</view>
				<view class="three-info-d">{{dataList['hardware']['mem'] | updateTime}}GB</view>
			</view>
			<view class="three-info">
				<view class="">磁盘平均IOPS</view>
				<view class="three-info-d">{{dataList['hardware']['averageIOPS'] || '-'}}</view>
			</view>
			<view class="three-info">
				<view class="">数据盘</view>
				<view class="three-info-d">{{dataList['hardware']['diskInfo'] || '-'}}</view>
			</view>
			
			<view class="horizontal-scroll">
				<view class="fixed-content" > 
					<view class="td" bindtap="showAll" style="font-weight: bolder;">磁盘名</view>
					<view class="td" bindtap="showAll" v-for="(item,index) in dataList['diskIOPS']" :key="index">{{item.name}}</view>
				</view>
				<view class="scroll-content">
					<scroll-view class="scroll-view_w" scroll-x style="width:100%">
						<view class="item">
							<view class="td" style="font-weight: bolder;">类型</view>
							<view class="td" v-for="(item,index) in dataList['diskIOPS']" :key="index">{{item.type}}</view>
						</view>
						<view class="item">
							<view class="td" style="font-weight: bolder;">大小</view>
							<view class="td" v-for="(item,index) in dataList['diskIOPS']" :key="index">{{item.size}}</view>
						</view>
						<view class="item">
							<view class="td" style="font-weight: bolder;">磁盘利用率</view>
							<v<view class="td" v-for="(item,index) in dataList['diskIOPS']" :key="index">{{item.averageIOPS || '-'}}</view>
						</view>
						<view class="item">
							<view class="td" style="font-weight: bolder;">IOPS</view>
							<v<view class="td" v-for="(item,index) in dataList['diskIOPS']" :key="index">{{item.iops || 0}}</view>
						</view>
						<view class="item">
							<view class="td" style="font-weight: bolder;">压测用时</view>
							<v<view class="td" v-for="(item,index) in dataList['diskIOPS']" :key="index">{{item.measureCost || 0}}</view>
						</view>
					</scroll-view>
				</view>
			</view>

		</view>
		

	</view>
</template>

<script>
	let App = getApp()
	export default {
		data() {
			return {
				eid:'',
				dataList:[],
				equ_status:0,
				stage:'',
				rtt:0,
				tcpRate:0,
				limitBw:0
			}
		},
		onLoad(option) {
			uni.showLoading({
				title:'请稍后'
			})
			this.eid = option.selectID
			this.equ_status = option.status
			this.getInfo()
			this.getInfo1()
		},
		methods: {
			
			getInfo(){
				uni.showLoading({
					title:'加载中'
				})
				this.$api.interfaceApi('getQualityReport')({
					eid:this.eid,
					sys:App.globalData.sys
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.dataList = res.data
						this.rtt = 0;
						this.tcpRate = 0
						if(res.data.pressure){
							for(var i=1;i<res.data.pressure[0].lines.length;i++){
								this.rtt += res.data.pressure[0].lines[i].rtt
								this.tcpRate += res.data.pressure[0].lines[i].tcpRetryMissRate
								this.limitBw += res.data.pressure[0].lines[i].limitBw
							}
						}
						
					}else{
						uni.showToast({
							title:'获取失败,请联系管理'
						})
					}
				})
			},
			
			getInfo1(){
				uni.showLoading({
					title:'加载中'
				})
				this.$api.interfaceApi('statuses')({
					eid:this.eid,
					sys:App.globalData.sys
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.stage = res.data.stage
					}else{
						uni.showToast({
							title:'获取失败,请联系管理'
						})
					}
				})
			},
			
			networkpressure(){
				if(this.equ_status == 2){
					uni.showModal({
						title:'设备不在线'
					})
				}
				
				uni.showLoading({
					title:'压测中'
				})
				this.$api.interfaceApi('networkpressure')({
					eid:this.eid,
					sys:App.globalData.sys
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						uni.showToast({
							title:'压测成功'
						})
					}else{
						uni.showModal({
							title:res.data.desc
						})
					}
				})
			},
			
			seeAll(){
				uni.navigateTo({
					url:'/pages/equipment/see-all?eid='+this.eid
				})
			}
			
			
		},
		
		//时间戳的处理
		filters:{
			formatDate: function(value) {
				var date = new Date();
				date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			},
			
			updateTime:function(value){
				return (value/1024/1024*1).toFixed(2)
			}
			 
		},
	}
</script>

<style lang="less">
	.content {
		padding: 20rpx;
		box-sizing: border-box;

		.title {
			font-weight: bolder;
			padding: 20rpx 0;
			box-sizing: border-box;
		}

		.one {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.one-info {
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #f1f1f1;
				padding: 20rpx;
				box-sizing: border-box;
			}
		}

		.two {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.two-info {
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #f1f1f1;
				padding: 20rpx;
				box-sizing: border-box;
			}

			.two-info-d {
				font-size: 26rpx;
			}

			.two-info-t {
				font-size: 24rpx;
				color: #ffaa00;
			}

			.two-info-s {
				font-size: 24rpx;
				color: #00aaff;
			}

			.horizontal-scroll {
			  overflow: hidden;
			}
			
			.fixed-content {
			  float: left;
			  width: 35%;
			}
			
			.scroll-content {
			  float: left;
			  width: 65%;
			}
			
			.scroll-view_w {
			  width: 100%;
			  white-space: nowrap;
			}
			
			.scroll-view_w .item {
			  width: 150px;
			  display: inline-block;
			}
			
			.horizontal-scroll .th {
			  background: #75cae645;
			  height: 40px;
			  padding:0 10px;
			  line-height: 40px;
			  text-align: center;
			  font-size: 15px;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  white-space: nowrap;
			}
			
			.horizontal-scroll .td {
			  background: #fff;
			  padding:0 10px;
			  font-size: 15px;
			  height: 40px;
			  line-height: 40px;
			  text-align: center;
			  overflow: hidden;
			  //text-overflow: ellipsis;
			  white-space: nowrap;
			  border-bottom:1rpx solid #eee;
			}
			.horizontal-scroll .td:nth-child(2n+1){
			  background: #75cae645;
			}
		}
		
		.three {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			margin: 20rpx 0rpx;
		
			.three-info {
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #f1f1f1;
				padding: 20rpx;
				box-sizing: border-box;
			}
		
			.three-info-d {
				font-size: 26rpx;
			}
		
			.three-info-t {
				font-size: 24rpx;
				color: #ffaa00;
			}
		
			.three-info-s {
				font-size: 24rpx;
				color: #00aaff;
			}
		
			.horizontal-scroll {
			  overflow: hidden;
			}
			
			.fixed-content {
			  float: left;
			  width: 35%;
			}
			
			.scroll-content {
			  float: left;
			  width: 65%;
			}
			
			.scroll-view_w {
			  width: 100%;
			  white-space: nowrap;
			}
			
			.scroll-view_w .item {
			  width: 150px;
			  display: inline-block;
			}
			
			.horizontal-scroll .th {
			  background: #75cae645;
			  height: 40px;
			  padding:0 10px;
			  line-height: 40px;
			  text-align: center;
			  font-size: 15px;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  white-space: nowrap;
			}
			
			.horizontal-scroll .td {
			  background: #fff;
			  padding:0 10px;
			  font-size: 15px;
			  height: 40px;
			  line-height: 40px;
			  text-align: center;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  white-space: nowrap;
			  border-bottom:1rpx solid #eee;
			}
			.horizontal-scroll .td:nth-child(2n+1){
			  background: #75cae645;
			}
		}

	}
</style>
